<template>
  <div class="w-p-100 h-p-100">
    <div class="w-p-100 h-p-30 flex">
      <CustomLightNumber :value="7892238"  title="数据展示"></CustomLightNumber>
      <CustomLightNumber :value="7892238"  title="数据展示"></CustomLightNumber>
    </div>
    <div class="chart-content w-p-100 h-p-70" :id="idName"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import CustomLightNumber from "../CustomLightNumber/index.vue";
const porp = defineProps({
  idName: {
    Type: String,
    default: () => "chart" + Math.floor(Math.random() * 100000000),
  },
  configData: {
    Type: Object,
    default: () => {
      return {
        xAxisData: [],
        yAxisName: [],
        series: [],
      };
    },
  },
});

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById(porp.idName));

  const dataList = [
    {
      value: 75,
      show: true,
      name: "参数",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: "rgba(61, 181, 204, 1)",
          },
          {
            offset: 0.85,
            color: "rgba(61, 181, 204, 0)",
          },
        ]),
      },
    },
    {
      value: 75,
      show: true,
      name: "参数",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0.15,
            color: "rgba(244, 229, 34, 0)",
          },
          {
            offset: 1,
            color: "rgba(244, 229, 34, 1)",
          },
        ]),
      },
    },
    {
      value: 75,
      show: true,
      name: "参数",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0.15,
            color: "rgba(244, 116, 35, 0)",
          },
          {
            offset: 1,
            color: "rgba(244, 116, 35, 1)",
          },
        ]),
      },
    },

    {
      value: 75,
      show: true,
      name: "参数",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
          {
            offset: 0.15,
            color: "rgba(255, 0, 52, 0)",
          },
          {
            offset: 1,
            color: "rgba(255, 0, 52, 1)",
          },
        ]),
      },
    },
  ];

  const option = {
    backgroundColor: "transparent",
    title: {
      text: "3020",
      top: "38%",
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: "#fff",
        fontSize: 28,
        fontWeight: "bold",
      },
      subtext: "数据展示",
      subtextStyle: {
        color: "#F0F2F5",
      },
    },

    series: [
      {
        name: "数据",
        type: "pie",
        radius: ["70%", "80%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        avoidLabelOverlap: false,
        label: {
          show: true,
          color: "#fff",
          lineHeight: 18,
          formatter: ["{a|参考值}", "{x|75}"].join("\n"),
          rich: {
            x: {
              fontSize: 18,
              fontFamily: "Microsoft YaHei",
              color: "#F0F2F5",
              width: 30,
              align: "center",
            },
          },
        },
        labelLine: {
          length: 10,
          length2: 30,
          smooth: true,
          lineStyle: {
            width: 1,
            color: "#00DEFF",
          },
        },
        data: dataList,
      },
      {
        //虚线圆环
        type: "gauge",
        startAngle: 0,
        endAngle: 360,
        center: ["50%", "50%"],
        radius: "65%",
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitNumber: 40, //虚线的个数
        axisLine: {
          show: false,
          lineStyle: {
            color: [[1, "rgba(65, 184, 131,0.8)"]],
            width: 1,
          },
        },
        splitLine: {
          length: 2, //每个虚线的宽度厚度
          lineStyle: {
            width: 2, //每个虚线的长度
            color: "rgba(65, 184, 131,0.8)",
          }, //刻度节点线
        },
        detail: {
          show: false,
        },
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
</style>